<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <style>
        table{
            margin: 150px auto;
            width: 800px;
            height: 200px;
            font-size: 12px;
            /* border: solid 1px #ccc ; */
        }
        table thead tr{
           
            background-color: rgb(116, 210, 226);
        }
        table thead th{
            height: 25px;
            vertical-align: middle;
        }

        table tbody tr{
            border-bottom: 1px #ccc solid ;
        }
        table tbody td{
            vertical-align:middle ;
            text-align: center;
            color:rgb(56, 110, 211);
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="allCheck"></th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody class="j_tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>Iphone X</td>
                <td>6299</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Iphone X</td>
                <td>6299</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Iphone X</td>
                <td>6299</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Iphone X</td>
                <td>6299</td>
            </tr>
        </tbody>
    </table>
    <script>
        //获取最顶部复选框
        var allCheck = document.querySelector('#allCheck');
        //获取下面的复选框
        var checks = document.querySelector('.j_tb').querySelectorAll('input');
        //给全选按钮注册事件
        allCheck.onclick = function(){
            //this.checked可以得到当前复选框的选中状态，true就是选中，false就是未选中
            for(var i = 0;i < checks.length;i++){
                //将全选按钮的状态给下面的按钮
                checks[i].checked = this.checked;
            }
        }
        /* 
            下面的按钮全选中，上面的就选中
            思路：给下面的所有按钮都绑定事件，
                每次点击都要检查下面的所有复选框是否被选中，只要有一个没有被选中的，上面就不选中
         */
        for(var i = 0;i < checks.length;i++){
            checks[i].onclick = function(){
                var flag = true;
                for(var i = 0;i < checks.length;i++){
                    if(!checks[i].checked){
                        flag = false;
                        break;//只要有一个没有被选中，就退出循环
                    }
                }
                allCheck.checked = flag;
            }
        }
    </script>
</body>
</html>